<script type="text/javascript">
    $(document).ready (function () {
        $('#index').tooltip({ trigger: 'hover focus' })
		$('#ant').tooltip({ trigger: 'hover focus' })	
    });
	$('#ant').on('input', function() {
		var ant=this.value;
		var i = 0;
		while($('#images').children().length < ant*3) {
			$('#images').append('<label>Url:  </label><input type="text" id="img_'+ant+'" name="img_'+ant+'" size="80" /><br/>');
		}
		while($('#images').children().length > ant*3) {
			$("#images").children().last().remove();
		}
	});
</script>
  
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Ny bildekarusell</h4>
</div>
<div class="modal-body">
	<form id="newElementForm">
		<label for="ant">Antall bilder i karusellen:</label>
		<div class="form-group">
            <input type="number" min="1" max="10" class="form control" id="ant" value="" name="ant" data-original-title="Du kan legge inn opptil 10 bilder." data-toggle="tooltip" data-placement="top" />
        </div>
		<div id="images" class="form-group">
        </div>
        <label for="index">Index på siden:</label>
        <div class="form-group">
            <input type="number"  min="1" max="999" class="form control" id="index" name="index"
                data-original-title="Du kan angi indexer fra 1 til 999. Indexen bestemmer hvor høyt opp på siden elementet vil vises, jo lavere index, jo høyere. Om to elemnter har samme index vil det nyeste elementet vises øverst."
                data-toggle="tooltip" data-placement="top" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
            <input type="button" name="action" class="btn btn-primary" value="Lagre" onClick="javascript:page.storeNewCarousel(this.form);"/>
        </div>
    </form>
</div>